<!--
 * @Descripttion:
 * @Author: YuZhenJing
 * @Date: 2020-03-14 11:26:38
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-03-24 18:50:28
 -->
<template>
  <div class="nav-default-tree">
    <ul class="nav-default-list" id="navDefaultListId">
      <li
        :key="nav.funListCode"
        v-for="nav in navData"
        :class="{ active: nav.isActive == true, open: nav.isOpen == true }"
      >
        <nav-link :data="nav" @handleClick="handleClick">
          <!-- 首层导航图标 -->
          <span v-if="nav.funListIcon" class="menu-icon">
            <i :class="nav.funListIcon"></i>
          </span>
          <!-- 首层导航名称 -->
          <span class="menu-text" v-text="nav.funListName"></span>
          <!-- 首层导航下拉三角图标 -->
          <span v-if="nav.funListType == 'group'" class="arrow">
            <i class="dropdown-toggle"></i>
          </span>
        </nav-link>
        <template v-if="nav.children != null && nav.children.length != 0">
          <sub-nav-menu :parentNavData="nav" @handleClick="handleClick"></sub-nav-menu>
        </template>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  components: {
    'sub-nav-menu': require('./SubNavMenu.vue').default,
    'nav-link': require('./Link.vue').default
  },
  props: {
    navData: {
      type: Array,
      required: true
    },
    defaultActive: {
      type: String,
      default: ''
    },
    activeColor: {
      type: String,
      default: '#409EFF'
    }
  },
  data() {
    return {
      activeArray: [],
      openArray: [],
      dataList: {}
    }
  },
  created() {
    if (this.navData && this.navData.length !== 0) {
      const closure = (
        subList = this.navData,
        parentCode = '',
        allParentCode = []
      ) => {
        subList.map(item => {
          this.$set(item, 'isActive', false)
          this.$set(item, 'isOpen', false)
          this.$set(item, 'parentCode', parentCode)
          if (parentCode !== '') {
            if (allParentCode.indexOf(parentCode) === -1) {
              allParentCode.push(parentCode)
            }
          }
          this.$set(item, 'allParent', allParentCode)
          this.dataList[item.funListCode] = item
          if (this.defaultActive !== '') {
            if (item.funListUrl === this.defaultActive) {
              this.activeArray = JSON.parse(JSON.stringify(item.allParent))
              this.activeArray.push(item.funListCode)
              this.openArray = JSON.parse(JSON.stringify(item.allParent))
            }
          }
          if (item.children && item.children.length !== 0) {
            closure(
              item.children,
              item.funListCode,
              JSON.parse(JSON.stringify(allParentCode))
            )
          }
        })
      }
      closure()
    }
  },
  methods: {
    handleClick(nav) {
      if (nav.funListType === 'group') {
        if (this.openArray.indexOf(nav.funListCode) === -1) {
          this.openArray.map(item => {
            this.dataList[item].isOpen = false
          })
          this.openArray = JSON.parse(JSON.stringify(nav.allParent))
          this.openArray.push(nav.funListCode)
          this.openArray.map(item => {
            this.dataList[item].isOpen = true
          })
        } else {
          nav.isOpen = !nav.isOpen
        }
      } else {
        if (this.activeArray.indexOf(nav.funListCode) === -1) {
          this.activeArray.map(item => {
            this.dataList[item].isActive = false
          })
          this.activeArray = JSON.parse(JSON.stringify(nav.allParent))
          if (this.activeArray.length === 0) {
            this.openArray.map(item => {
              this.dataList[item].isOpen = false
            })
          }
          this.activeArray.push(nav.funListCode)
          this.activeArray.map(item => {
            this.dataList[item].isActive = true
          })
        }
      }
    }
  },
  mounted() {
    document
      .getElementById('navDefaultListId')
      .style.setProperty(`--nav-active-color`, this.activeColor)
    this.activeArray.map(item => {
      this.dataList[item].isActive = true
    })
    this.openArray.map(item => {
      this.dataList[item].isOpen = true
    })
  }
}
</script>
<style lang="stylus" scope>
// 重置默认样式
.nav-default-tree
  overflow hidden
  ul
    margin 0
    padding 0
    list-style none
    li
      position relative
      a
        text-decoration none
        display block
        color #585858
        height 38px
        line-height 38px
        .arrow
          line-height 14px
          position absolute
          right 18px
          top 12px
          padding 0
          text-align center
          font-size 14px
// 定义导航样式
.nav-default-tree
  text-align left
  font-size 14px
  .nav-default-list
    border-style solid
    border-color #ccc
    border-width 0px 0px 1px 0px
    .submenu
      background-color #fff
    // 一级菜单标签样式
    >li
      &:hover::before
        content ''
        position absolute
        top 0
        bottom 0
        height 40px
        width 3px
        background-color #629cc9
        overflow hidden
        z-index 1
      >a
        border-top 1px solid #ccc
        background-color #F8F8F8
        padding-left 8px
        .menu-icon
          margin-right 5px
          font-size 16px
      // 二级菜单标签样式
      >.submenu
        >li
          // 纵向层级虚线
          &::before
            content ''
            position absolute
            left 14px
            top 0
            bottom 0
            border-left 1px dotted #9dbdd6
            z-index 1
          >a
            padding-left 28px
            border-top 1px dotted #E4E4E4
            // 水平层级虚线
            &::before
              content ''
              position absolute
              width 7px
              left 14px
              top 18px
              border-top 1px dotted #9dbdd6
              z-index 1
            &:hover
              color #4B88B7
              background-color #F1F5F9
              &::before
                top 14px
                left 15px
                width 0px
                height 0px
                border solid 4px transparent
                border-left-color #4B88B7 !important
                background-color #F1F5F9
              .arrow
                .dropdown-toggle
                  border-color #4B88B7
          // 三级菜单标签样式
          >.submenu
            >li
              a
                margin-left 15px
                padding-left 25px
                border-top 1px dotted #E4E4E4
                &::before
                  content ''
                  position absolute
                  top 14px
                  left 29px
                  width 0px
                  height 0px
                  border solid 4px transparent
                  border-left-color #777
                &:hover
                  color #4B88B7
                  background-color #F1F5F9
                  &::before
                    border-left-color #4B88B7
              // 四级菜单标签样式
              >.submenu
                >li
                  >a
                    padding-left 36px
                    &::before
                      left 40px
                  // 五级菜单标签样式
                  >.submenu
                    >li
                      >a
                        padding-left 46px
                        &::before
                          left 50px
    // 选中菜单样式
    li.active
      >a
        font-weight bold
        color var(--nav-active-color)
        border-right 2px solid var(--nav-active-color)
        background-color #FFF
        &::before
          border-left-color #C86139 !important
        &::after
          content ''
          position absolute
          right 1px
          top 4px
          border 8px solid transparent
          border-width 14px 10px
          border-right-color var(--nav-active-color)
      .submenu>li.active:not(.open)>a
        background-color #F5F7FA
    // 展开下级菜单
    li.active.open
      >a
        border-right 0
        &::before
          border-left-color #777 !important
        &::after
          display none
    // 下拉箭头图标
    .dropdown-toggle
      width 8px
      height 8px
      display block
      border-style solid
      border-color #777
      border-width 1px 0px 0 1px
      transform rotate(-135deg)
    // 展开动画
    .expand-animation
      opacity 0
      animation-name openMenu
      animation-duration 0.6s
      animation-fill-mode forwards
      @keyframes openMenu
        0%
          transform translateY(-30px)
          opacity 0
        100%
          transform translateY(0)
          opacity 1
</style>
